<template>
    <div id="activity_search">
        <div class="search_box">
            <span class="cancel" @click="cancel"><i class="iconfont "></i></span>
            <i class="iconfont icon-sousuo"></i>
            <input type="text" placeholder="请输入关键词" v-model="searchValue" @keydown="searchAct" class="search">
            <span class="position"><i class="iconfont icon-dingwei"></i></span>
        </div>
        <empty class="empty" v-if="isEmpty" message="未搜索内容"></empty>
    </div>
</template>
<script>
import empty from "components/empty-page";
import active_list from "services/event/active_list";
export default {
  components: {
    empty
  },
  data() {
    return {
      searchValue: "",
      isEmpty: false,
      active: [],
    };
  },
  created() {},
  methods: {
    searchAct(e) {
      if (e.keyCode === 13) {
        active_list.bind(this)(
          {
            methodName: "ListActivityByType",
            areaId: this.$.chooseCity,
            searchValue: this.searchValue,
            pageable: {
              pageNumber: 1,
              pageSize: 20
            },
            types: this.type
          },
          res => {
            console.log(res);
            if (res.length === 0) {
              this.isEmpty = true;
            } else {
              this.active = res;
            }
          },
          err => {
            console.log(err);
          }
        );
      }
    },
    cancel() {
      this.$router.go(-1);
    },
  }
};
</script>
<style lang="scss">
#activity_search {
  .search_box {
    display: flex;
    height: 46px;
    line-height: 46px;
    text-align: center;
    background-color: #f7f7f7;
    .icon-sousuo {
      position: absolute;
      top: 1px;
      left:70px;
    }
    .search:focus{
      outline: none;
    }
    .position{
        flex: 0 0 50px;
        i{
            font-size: 20px;
        }
    }
    .search {
      height: 36px;
      line-height: 36px;
      margin: 5px 10px;
      border-radius: 10px;
      border: none;
      text-align: center;
      background-color: rgba(0, 0, 0, 0.1);
      flex: 1;
    }
    .cancel {
      height: 46px;
      line-height: 46px;
      flex: 0 0 50px;
    }
  }
  .empty {
    height: calc(100vh - 46px);
  }
}
</style>
